{%- comment -%} 用于调试（需要把ts里面的引入包注释） {%- endcomment -%}
{% comment %} <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script> {% endcomment %}

<link rel="stylesheet" href="{{ 'station-product-index.min.css' | asset_url }}">

<div class="station-banner position-relative">
  <div class="station-banner-wrapper as-station-banner-wrapper position-sticky top-0">
    {% comment %} data-cut-nav-height="true" {% endcomment %}
    <div class="container-topic px-0 position-relative as-station-video-wrap">
      {% comment %} 视频 {% endcomment %}
      <div class="position-relative station-banner-video overflow-hidden h-adapt-to-screen as-station-full-screen h-md-adapt-to-screen as-station-md-full-screen">
        {% if section.settings.desktop_video_url or section.settings.mobile_video_url %}
          {% render 'lazy-video',
            pc_video: section.settings.desktop_video_url.sources[1].url,
            mob_video: section.settings.mobile_video_url.sources[1].url,
            desktop_poster: section.settings.cover_image_on_desktop,
            mobile_poster: section.settings.cover_image_on_mobile
          %}
        {% else %}
          <div class="object-fit-cover img-placeholder h-100">
            {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
          </div>
        {% endif %}
      </div>
      {% comment %} 视频中内容 {% endcomment %}
      <div class="absolute-center station-banner-content as-station-banner-content" style="z-index:9">
        <div class="w-100 h-100 position-relative">
          <div class="w-100 h-100 container d-flex align-items-center justify-content-center">
            {% comment %} with-stretched-link {% endcomment %}
            <div class="col-lg-10 col-12"> 
              {% comment %} <div class="product-logo m-auto">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.text_image | img_url: 'master' }}"
                    alt="{{ section.settings.text_image | escape }}"  
                  >
                </picture>
              </div> {% endcomment %}
              
              <div class="text-white text-center product-des">
                <h1 class="display-1 fw-bold product-des">{{ section.settings.headline }}</h1>
                {{ section.settings.heading | replace: '<p>', '<p class="h1 mb-0">' }}
              </div>
            </div>
          </div>
          <div class="scroll-look position-absolute w-100">
            <div class="d-flex justify-content-center mb-2">
              <svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.9425 9.4425L8.25 15.1275V0H6.75V15.1275L1.0575 9.4425L0 10.5L7.5 18L15 10.5L13.9425 9.4425Z" fill="white"/>
              </svg>
            </div>
            <div class="d-flex justify-content-center text-white">{{ section.settings.look_scroll }}</div>
          </div>
        </div>
      </div>

      {% comment %} 视频未加载完占位图片 {% endcomment %}
      {% comment %} <div class="absolute-center as-poster-pic poster-pic" style="z-index:8">
        {% assign desktop_image = section.settings.cover_image_on_desktop %}
        {% assign mobile_image = section.settings.cover_image_on_mobile %}
        <picture class="w-100">
          <source
            media="(max-width: 767px)"
            sizes="(max-width: 767px) 100vw, 750w"
            srcset="
              {%- if mobile_image.width >= 414 -%}{{ mobile_image | img_url: '414x' }} 414w,{%- endif -%}
              {%- if mobile_image.width >= 600 -%}{{ mobile_image | img_url: '600x' }} 600w,{%- endif -%}
              {%- if mobile_image.width >= 828 -%}{{ mobile_image | img_url: '828x' }} 828w,{%- endif -%}
              {%- if mobile_image.width >= 1000 -%}{{ mobile_image | img_url: '1000x' }} 1000w,{%- endif -%}
              {%- if mobile_image.width >= 1200 -%}{{ mobile_image | img_url: '1780x' }} 1200w,{%- endif -%}
              {%- if mobile_image.width >= 2400 -%}{{ mobile_image | img_url: '2000x' }} 2400w,{%- endif -%}
            "
            src="{{ mobile_image | img_url: '750x' }}"
          >
          <img
            class="h-100 w-100 object-fit-cover position-absolute"
            srcset="
              {%- if desktop_image.width >= 750 -%}{{ desktop_image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if desktop_image.width >= 1100 -%}{{ desktop_image | img_url: '1100x' }} 1100w,{%- endif -%}
              {%- if desktop_image.width >= 1500 -%}{{ desktop_image | img_url: '1500x' }} 1500w,{%- endif -%}
              {%- if desktop_image.width >= 1780 -%}{{ desktop_image | img_url: '1780x' }} 1780w,{%- endif -%}
              {%- if desktop_image.width >= 2000 -%}{{ desktop_image | img_url: '2000x' }} 2000w,{%- endif -%}
              {%- if desktop_image.width >= 3000 -%}{{ desktop_image | img_url: '3000x' }} 3000w,{%- endif -%}
              {%- if desktop_image.width >= 3840 -%}{{ desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}
            "
            src="{{ desktop_image | img_url: '1500x' }}"
            width="{{ desktop_image.width | divided_by : 2 }}"
            height="{{ desktop_image.height | divided_by : 2 }}"
            alt="{{ desktop_image.alt | escape }}"
          >
        </picture>
      </div> {% endcomment %}
    </div>
    {% comment %} 放大白蒙层 {% endcomment %}
    <div class="mask-white as-mask-white position-absolute w-100 h-100 top-0 bg-white overflow-hidden">
      <div
        class="opacity-logo container as-translate-top position-absolute w-100 d-flex justify-content-center"
        style="z-index:10"
      >
        <div class="product-title-1 as-product-title-1 col-lg-7 col-12">
          <picture>
            <img
              class="w-100 object-fit-cover h-100"
              src="{{ section.settings.text_image | img_url: 'master' }}"
              alt="{{ section.settings.text_image | escape }}"
            >
          </picture>
        </div>
      </div>
      <div class="back-img as-back-img position-absolute w-100 h-100" style="z-index:9">
        {% assign desktop_image = section.settings.background_image_on_desktop %}
        {% assign mobile_image = section.settings.background_image_on_mobile %}
        <picture class="w-100">
          <source
            media="(max-width: 767px)"
            sizes="(max-width: 767px) 100vw, 750w"
            srcset="
              {%- if mobile_image.width >= 414 -%}{{ mobile_image | img_url: '414x' }} 414w,{%- endif -%}
              {%- if mobile_image.width >= 600 -%}{{ mobile_image | img_url: '600x' }} 600w,{%- endif -%}
              {%- if mobile_image.width >= 828 -%}{{ mobile_image | img_url: '828x' }} 828w,{%- endif -%}
              {%- if mobile_image.width >= 1000 -%}{{ mobile_image | img_url: '1000x' }} 1000w,{%- endif -%}
              {%- if mobile_image.width >= 1200 -%}{{ mobile_image | img_url: '1780x' }} 1200w,{%- endif -%}
              {%- if mobile_image.width >= 2400 -%}{{ mobile_image | img_url: '2000x' }} 2400w,{%- endif -%}
            "
            src="{{ mobile_image | img_url: '750x' }}"
          >
          <img
            class="h-100 w-100 object-fit-cover position-absolute"
            srcset="
              {%- if desktop_image.width >= 750 -%}{{ desktop_image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if desktop_image.width >= 1100 -%}{{ desktop_image | img_url: '1100x' }} 1100w,{%- endif -%}
              {%- if desktop_image.width >= 1500 -%}{{ desktop_image | img_url: '1500x' }} 1500w,{%- endif -%}
              {%- if desktop_image.width >= 1780 -%}{{ desktop_image | img_url: '1780x' }} 1780w,{%- endif -%}
              {%- if desktop_image.width >= 2000 -%}{{ desktop_image | img_url: '2000x' }} 2000w,{%- endif -%}
              {%- if desktop_image.width >= 3000 -%}{{ desktop_image | img_url: '3000x' }} 3000w,{%- endif -%}
              {%- if desktop_image.width >= 3840 -%}{{ desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}
            "
            src="{{ desktop_image | img_url: '1500x' }}"
            width="{{ desktop_image.width | divided_by : 2 }}"
            height="{{ desktop_image.height | divided_by : 2 }}"      
            alt="{{ desktop_image.alt | escape }}"
          >
        </picture>
      </div>
      {% comment %} 产品图片 {% endcomment %}
      {% comment %} {%- style -%}
        .aspect-ratio-{{ section.id }} {
            @media screen and (max-width: 1151px) {
              {%- if section.settings.product_image_on_mobile != blank -%}
                --se-aspect-ratio: {{ 1 | divided_by: section.settings.product_image_on_mobile.aspect_ratio | times: 100 }}%;
              {%- endif -%}
            }
        }
      {%- endstyle -%} {% endcomment %}
      <div class="product-img-1 as-product-img-1 w-100 position-absolute" style="z-index:10">
        <div class="d-lg-block d-none w-100">
          <picture class="w-100 d-flex justify-content-center">
            <img
              class="object-fit-cover"
              src="{{ section.settings.product_image_on_desktop | img_url: 'master' }}"
              alt="{{ section.settings.product_image_on_desktop.alt | escape }}"
              width="{{ section.settings.product_image_on_desktop.width | divided_by: 2 }}"
              height="{{ section.settings.product_image_on_desktop.height | divided_by: 2 }}"
            >
          </picture>
        </div>
        {% comment %} ratio aspect-ratio-{{ section.id }} {% endcomment %}
        <div class="w-100 d-lg-none d-block">
          <picture class="w-100">
            <img
              class="object-fit-cover w-100 as-product-img-src"
              src="{{ section.settings.product_image_on_mobile | img_url: 'master' }}"
              alt="{{ section.settings.product_image_on_mobile.alt | escape }}"
            >
          </picture>
        </div>
      </div>
    </div>
    
    {% comment %} 白蒙版内容 {% endcomment %}
    <div class="container as-translate-top d-flex justify-content-center content-des as-content-des position-absolute w-100">
      <div class="col-lg-7 col-12">
        <div class="as-heading2 h2 mb-0 px-0 fw-normal d-flex justify-content-center des-t text-center">{{ section.settings.heading_2 | replace: '<p>', '<p class="mb-0">' }}</div>
        <div class="d-flex justify-content-center station-banner-des-btn gray-700 as-station-banner-des-btn position-relative">
          <div class="w-100 text-center position-absolute">
            <div class="text-center">{{ section.settings.description | replace: '<p>', '<p class="mb-0">' }}</div>
            {% comment %} 播放全屏视频按钮 {% endcomment %}
            <div class="w-100 d-flex justify-content-center mt-md-6 mt-5">
              <a
                data-bs-toggle="modal"
                data-bs-target="#videoModalFull"
                class="btn btn-outline-primary play-video-btn position-absolute"
                style="transition: none;"
              >
                <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="24" height="24" transform="translate(0.605469 0.536621)" fill="transparent" style="mix-blend-mode:multiply"/>
                  <path d="M8.60547 5.53662L17.3555 12.5366L8.60547 19.5366V5.53662Z" fill="currentColor"/>
                </svg>
                <span class="ms-2">{{ section.settings.button_label }}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container d-flex justify-content-center content-des position-absolute w-100 active" style="top:15%;visibility:hidden;">
      <div class="col-lg-7 col-12">
        <div class="h2 mb-0 px-0 fw-normal d-flex justify-content-center des-t">{{ section.settings.heading_2 | replace: '<p>', '<p class="mb-0">' }}</div>
        <div style="visibility:hidden;" class="position-absolute as-heading2-placehodler h2 mb-0 px-0 fw-normal d-flex justify-content-center des-t text-nowrap">test</div>
        <div class="d-flex justify-content-center station-banner-des-btn gray-700 position-relative active">
          <div class="w-100 text-center position-absolute">
            <div class="text-center">{{ section.settings.description | replace: '<p>', '<p class="mb-0">' }}</div>
            {% comment %} 播放全屏视频按钮 {% endcomment %}
            <div class="w-100 d-flex justify-content-center mt-md-6 mt-5">
              <a
                class="btn btn-outline-primary as-placeholder-video-btn play-video-btn position-absolute"
                style="transition: none;"
              >
                <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="24" height="24" transform="translate(0.605469 0.536621)" fill="transparent" style="mix-blend-mode:multiply"/>
                  <path d="M8.60547 5.53662L17.3555 12.5366L8.60547 19.5366V5.53662Z" fill="currentColor"/>
                </svg>
                <span class="ms-2">{{ section.settings.button_label }}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="android-tv as-android-tv">
      <div class="d-lg-block d-none w-100">
        <picture class="w-100">
          <img
            class="object-fit-cover"
            src="{{ section.settings.android_tv_image_desktop | img_url: 'master' }}"
            alt="{{ section.settings.android_tv_image_desktop.alt | escape }}"
            width="{{ section.settings.android_tv_image_desktop.width | divided_by: 2 }}"
            height="{{ section.settings.android_tv_image_desktop.height | divided_by: 2 }}"
          >
        </picture>
      </div>
      <div class="w-100 d-lg-none d-block">
        <picture class="w-100">
          <img
            class="object-fit-cover"
            src="{{ section.settings.android_tv_image_mob | img_url: 'master' }}"
            alt="{{ section.settings.android_tv_image_mob.alt | escape }}"
            width="{{ section.settings.android_tv_image_mob.width | divided_by: 2 }}"
            height="{{ section.settings.android_tv_image_mob.height | divided_by: 2 }}"
          >
        </picture>
      </div>
    </div>
  </div>
  <div class="placeholder-content" style="height:150vh">
    <div class="as-trigger"></div>
  </div>
</div>

{% comment %} 视频弹窗 {% endcomment %}
<div class="modal fade" id="videoModalFull" tabindex="-1" aria-labelledby="video-modalLabel" bis_skin_checked="1" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen" bis_skin_checked="1">
    <div class="modal-content" bis_skin_checked="1">
      <button type="button" class="btn p-0 as-close btn-close btn-modal-close icon-wrap-md" data-bs-dismiss="modal" aria-label="Close">
        {% render 'icon-close-circle' %}
      </button>
      <div class="modal-body p-0">
          <div class="modal-inner-content d-flex h-100 justify-content-center">
            <div class="my-auto cursor-pointer">
              {% liquid
                assign pc_video = section.settings.complete_video_on_desktop.sources[1].url
                assign mob_video = section.settings.complete_video_on_mobile.sources[1].url
              %}
              {% if pc_video or mob_video %}
                <video
                  playsinline
                  webkit-playsinline
                  controls
                  muted
                  class="as-modal-video w-100 h-100 object-fit-cover cursor-pointer"
                  data-pc-video="{% if pc_video %}{{ pc_video }}{% else %}{{ mob_video }}{% endif %}"
                  data-mob-video="{% if mob_video %}{{ mob_video }}{% else %}{{ pc_video }}{% endif %}"
                ></video>
              {% else %}
                <div class="object-fit-cover img-placeholder h-100">
                  {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                </div>
              {% endif %}
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

<script src="{{ 'station-product.min.js' | asset_url }}" defer="defer"></script>
{% schema %}
{
  "name": "station banner",
  "tag": "section",
  "class": "station-banner-container as-station-banner",
  "settings": [
    {
      "type": "header",
      "content": "Banner 1"
    },
    {
      "type": "header",
      "content": "VIDEO" 
    },
    {
      "label": "Desktop video",
      "type": "video",
      "id": "desktop_video_url"
    },
    {
      "label": "Mobile video",
      "type": "video",
      "id": "mobile_video_url"
    },
    {
      "type": "header",
      "content": "IMAGE"
    },
    {
      "type": "image_picker",
      "id": "cover_image_on_desktop",
      "label": "Cover image on desktop"
    },
    {
      "type": "image_picker",
      "id": "cover_image_on_mobile",
      "label": "Cover image on mobile"
    },
    {
      "type": "image_picker",
      "id": "text_image",
      "label": "Text image"
    },
    {
      "type": "image_picker",
      "id": "android_tv_image_desktop",
      "label": "Android TV image on desktop"
    },
    {
      "type": "image_picker",
      "id": "android_tv_image_mob",
      "label": "Android TV image on mobile"
    },
    {
      "type": "header",
      "content": "CONTENT"
    },
    {
      "type": "text",
      "id": "headline",
      "label": "Headline"
    },
    {
      "type": "richtext",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "text",
      "id": "look_scroll",
      "default": "Scroll To Discover",
      "label": "Look SCROLL"
    },
    {
      "type": "header",
      "content": "Banner 2"
    },
    {
      "type": "header",
      "content": "VIDEO"
    },
    {
      "label": "Complete video on desktop",
      "type": "video",
      "id": "complete_video_on_desktop"
    },
    {
      "label": "Complete video on mobile",
      "type": "video",
      "id": "complete_video_on_mobile"
    },
    {
      "type": "header",
      "content": "IMAGE"
    },
    {
      "type": "image_picker",
      "id": "background_image_on_desktop",
      "label": "Background image on desktop"
    },
    {
      "type": "image_picker",
      "id": "background_image_on_mobile",
      "label": "Background image on mobile"
    },
    {
      "type": "image_picker",
      "id": "product_image_on_desktop",
      "label": "product image on desktop"
    },
    {
      "type": "image_picker",
      "id": "product_image_on_mobile",
      "label": "product image on mobile"
    },
    {
      "type": "header",
      "content": "CONTENT"
    },
    {
      "type": "richtext",
      "id": "heading_2",
      "default": "<p>Stream whenever, whevever.</p>",
      "label": "Heading"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description",
      "default": "<p>A perfect companion for your AR Glasses – The World's First Google Certified streaming<br> box that does everything, watch, game, and work on the move!</p>"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Play video",
      "label": "Button label"
    }
  ]
}
{% endschema %}
